// index.js
import {formatTime} from '../utils/utils'

Page({
    data:{
        time:'25', //分钟
        mTime:1500000, //毫秒
        timeStr:'25:00',
        rate:'',
        isClock:false,
        timer:null,
        playShow:true, //暂停按钮切换
        clockText:'', //番茄页任务名称显示
        cateArr:[
            {
                icon:'work',
                text:'专注'
            },
            {
                icon:'relax',
                text:'休息'
            },
            {
                icon:'others',
                text:'自定义'
            }
        ]
    },
    onLoad(){
        let res=wx.getSystemInfoSync()
        //750rpx 不同型号自动适配
        let rate=750/res.windowWidth
        this.setData({
            rate
        })
        console.log(444,rate)
    },
    slideChange(e){
        console.log(1,e.detail.value)
        this.setData({
            time:e.detail.value
        })
    },
    buttonChange(e){
        const iconList=e.currentTarget.dataset.iconList
        if(iconList==='自定义'){
            let _this=this
            wx.showModal({
                title: '自定义任务',
                editable:true,
                placeholderText:'请输入任务名称',
                confirmColor:'#FA8072',
                success (res) {
                  if (res.confirm) {
                    _this.setData({
                        clockText:res.content
                    })
                    _this.saveData()
                  }
                }
              })
        }else{
            this.setData({
                clockText:iconList
            })
            this.saveData()
        }
    },
    saveData(){
        this.setData({
            isClock:true,
            mTime:this.data.time*60*1000, //ms
            timeStr:parseInt(this.data.time) >= 10 ? this.data.time+ ":00" :"0" +this.data.time + ":00"
        })
        this.drawCircle()
        this.drawActive()
    },
    // 倒计时画圆圈
    drawCircle(){
        const lineWidth = 6 / this.data.rate;//px
        const query = wx.createSelectorQuery()
        query.select('#circle')
            .fields({ node:true, size: true})
            .exec((res) => {
                console.log(111,res)
               const canvas = res[0].node
               const ctx = canvas.getContext('2d')
               const dpr = wx.getSystemInfoSync().pixelRatio
               console.log(222,dpr)
               canvas.width = res[0].width * dpr
               canvas.height = res[0].height * dpr
               ctx.scale(dpr, dpr)
               ctx.lineCap='round'
               ctx.lineWidth="lineWidth"
               ctx.beginPath()
               ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2-2*lineWidth,0,2*Math.PI,false)
               ctx.strokeStyle ="#ffffff"
               ctx.stroke()
            })
    },
    drawActive(){
        let _this = this
        var timer =setInterval(()=>{
            let angle = 1.5 + 2*(_this.data.time*60*1000 - _this.data.mTime)/(_this.data.time*60*1000);
            let currentTime = _this.data.mTime - 100
            _this.setData({
                mTime:currentTime
            })
            if(angle<3.5){
                if(currentTime % 1000 == 0){
                    var timeStr1 = currentTime / 1000;//s
                    var timeStr2 = parseInt(timeStr1 / 60); //m
                    var timeStr3 = (timeStr1 - timeStr2 * 60) >= 10 ? (timeStr1 - timeStr2 * 60) :"0" +  (timeStr1 - timeStr2 * 60);
                    var timeStr2 = timeStr2 >= 10 ? timeStr2:"0" + timeStr2;
                    _this.setData({
                     timeStr:timeStr2 + ":" + timeStr3
                    })
                  };
                const lineWidth = 6 / _this.data.rate;//px
                const query = wx.createSelectorQuery()
                query.select('#circle_active')
                    .fields({ node:true, size: true})
                    .exec((res) => {
                    const canvas = res[0].node
                    const ctx = canvas.getContext('2d')
                    const dpr = wx.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    ctx.scale(dpr, dpr)
                    ctx.lineCap='round'
                    ctx.lineWidth="lineWidth"
                    ctx.beginPath()
                    ctx.arc(400/_this.data.rate/2,400/_this.data.rate/2,400/_this.data.rate/2-2*lineWidth,1.5*Math.PI,angle*Math.PI,false)
                    ctx.strokeStyle ="#E7624F"
                    ctx.stroke()
                    })
            }else{
                //计时完成时
                wx.showModal({
                    title: '提示',
                    content:'当前计时已完成，将跳转回主界面',
                    showCancel:false,
                    confirmText:'好的',
                    confirmColor:'#FA8072',
                    success (res) {
                      if (res.confirm) {
                        var logs = wx.getStorageSync("logs") || [];
                        logs.unshift({
                            date: formatTime(new Date),
                            cate: _this.data.clockText,
                            time: _this.data.time
                        });
                        console.log(789,logs)
                        wx.setStorageSync('logs', logs); //存入缓存
                        _this.setData({
                            timeStr:"00:00",
                            playShow:false,
                            isClock:false
                         })
                      }
                    }
                })
                clearInterval(timer); 
            }    
        },100)
        _this.setData({
            timer :timer
        })    
    },
    // 暂停按钮
    handlePause(){
        console.log(99,this.data.timer)
        clearInterval(this.data.timer);
        this.setData({
            playShow:false
        }) 
    },
    //播放按钮
    handlePlay(){
        this.drawActive()
        this.setData({
            playShow:true
        }) 
    },
    //中止按钮
    handleSuspend(){
        clearInterval(this.data.timer);
        let _this=this
        wx.showModal({
            title: '提示',
            content:'确定中止任务吗？当前计时会立刻停止，并返回主界面',
            confirmColor:'#FA8072',
            success (res) {
              if (res.confirm) {
                _this.setData({
                    isClock:false,
                    playShow:true
                })
              }else if(res.cancel){
                _this.drawActive()
              }
            }
        })
    }
})
